<template>
  <div class="box">
     <div>
        <div v-for="(item,index) in filterList(1)" :key="index">
           <input type="checkbox" v-model="item.isChecked">
           <span>{{item.name}}</span>
        </div>
     </div>
     <div>
        <button @click="toRight">&gt;</button>
     </div>
     <div>
        <div v-for="(item,index) in filterList(2)" :key="index">
            <input type="checkbox" v-model="item.isChecked">
            <span>{{item.name}}</span>
          </div>
     </div>
  </div>
</template>

<script>
export default {
  computed:{
    filterList(){
      return function(type){
        return this.list.filter(item=>item.type==type)
      }
    }
  },
  methods:{
    toRight(){
      this.filterList(1).filter(item=>item.isChecked).forEach(item=>{
        item.type=2
        item.isChecked=false
      })
    }
  },
  data() {
    return {
      list: [
        { name: "Option1", type: 1, isChecked: false },
        { name: "Option2", type: 1, isChecked: false },
        { name: "Option3", type: 1, isChecked: false },
        { name: "Option4", type: 2, isChecked: false },
        { name: "Option5", type: 2, isChecked: false },
        { name: "Option6", type: 2, isChecked: false }
      ],
    };
  },
};
</script>

<style>
.box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 500px;
  height: 200px;
  background-color: turquoise;
}
</style>